<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>模型信息</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Input.css">
<link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="https://www.purecss.cn/css/pure-min.css">
<!--轮播-->
<link rel="stylesheet" href="/css/bootstrap4-3-1.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>


<!-- Dialog -->
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Dialog.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Dialog.js"></script>
<script src="/js/index.js"></script>

<style>
    body{
        text-align: center;
        overflow-y: auto;
        overflow-x: auto;
        background-color: lightcyan;
    }
    a:link{text-decoration:none;   /* 指正常的未被访问过的链接*/
    }
    a{
        color: gray;
    }

    .nav{
        width: 100%;height: 10%;
        background-color: white;
        display: flex;
        justify-content: center;
        margin: 1px auto;
        text-align: center;
    }
    .box{
        width: 80%;height: 15%;
        background-color: white;
        margin: 1px auto;
    }

    .lesson_box{
        width: 80%;height: 70%;
        background-color: white;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 1px auto;
    }
    .lesson{
        width: calc(25% - 2px);
        height: calc(50% - 5px);
        background-color: white;
        margin-left: 2px;
        margin-top: 5px;
        /*background-image: url("/img/lo.gif");*/
    }
    .lesson_img{
        width: calc(100%);height:calc(60%)
    }
    .lesson_p{
        height: calc(10%);
        font-size: 10px;
        margin-top: 0px;
        color: gray;
        /*text-align: center;*/
    }
    .p_button{
        margin-left: 10px;
    }
    .session_box{
        width: 80%;height: 100%;
        background-color: white;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        margin: 1px auto;
    }
    .session{
        width: calc(50% - 2px);
        height: calc(50% - 5px);
        background-color: white;
        margin-left: 2px;
        margin-top: 5px;
    }
    .session_img{
        width: calc(100%);height:calc(100%)
    }
    .p{
        text-align: left;
        font-size: 15px;
        margin: 3% 3%
    }

</style>
<body>

<!--导航栏-->
<div th:replace="common :: navbarUnLogin"></div>

<section class="session_box">
    <div class="session">
        <img class="session_img" th:src="${model.imgUrl}"  onerror="this.src='/img/default.jfif'" >
    </div>
    <div class="session" >
        <p class="p" style="text-align: left;font-size: 18px;color: cornflowerblue">简介</p>
        <p  class="p" th:text="'模型名称：'+${model.name}">机器人入门</p>
        <p  class="p" >参考课时：2课时</p>
    </div>
    <div class="session" style="width: 70%">
        <p style="text-align: left;font-size: 18px;color: cornflowerblue">模型简介</p>
        <p class="" style="font-size: 15px;text-align: left">
            模型一供给需求模型主要用来演绎供给与需求的变化。模型规则是，每个小组每期决定是否参与市场投资（供给），若不参与当期收益为0，
            若参与市场则提供100个数量的商品，收益与亏损由当前参与市场投资的总数量决定。
            现在有两个函数公式，分别称为供给函数与需求函数。供给函数（S）为P=(Q+400)/200；需求函数（D）为P=(800-Q)/100。
            现在将两个函数联立， ，可以求出均衡数量与均衡价格，即 ，在图形上画出来是这种效果：
        </p>
<!--        <img style="width: 60%;height: 60%" src="/img/line.png">-->
        <p style="font-size: 15px;text-align: left">
        <hr style="color: white">
            基础公式：
        <hr>
            供给函数（S）为P=(Q+400)/200
        <br>
            需求函数（D）为P=(800-Q)/100
        </p>
    </div>
    <div class="session" style="width: 25%;margin-left: 2%">
        <p class="p" style="text-align: left;font-size: 18px;color: cornflowerblue">基本信息</p>
        <p class="p">创建课程数  28 节</p>
        <p class="p">模型创建人 王光亚</p>
    </div>




</section>

<script>
    // function createLesson() {
    //     alert("创建成功！");
    //
    // }
    function createLesson(modelId,modelName,imgUrl) {
        new Dialog({
            title: '创建课程',
            content: '<h6>课程名称</h6>' +
                '<input style="font-size: 18px;" id="name" placeholder = "课程名称" value= '+modelName+' class="ui-input">' +
                '<h6>期数（默认5期）</h6>' +
                '<input style="font-size: 18px;" id="issues" placeholder = "期数" value= 5 class="ui-input" type="number">' +
                '<h6>结束计时(min)</h6>' +
                '<input style="font-size: 18px;" id="times" placeholder = "结束计时（min）" value= 5 class="ui-input" type="number">' +
                '<h6>描述</h6>' +
                '<input style="font-size: 18px;" id="remark" placeholder = "限200字"  class="ui-input" type="text">' ,
            buttons: [{
                events: function (event) {
                    // 按钮禁用
                    // event.dialog是当前实例对象
                    console.log(event)
                    console.log(event.type)
                    if(event.type){
                        console.log(document.getElementById("name").value);
                    }
                    var data = "";
                    data = data + "name="+document.getElementById("name").value;
                    data = data + "&issues="+document.getElementById("issues").value;
                    data = data + "&times="+document.getElementById("times").value;
                    data = data + "&remark="+document.getElementById("remark").value;
                    data = data + "&modelId="+modelId;
                    data = data + "&imgUrl="+imgUrl;
                    console.log(data);
                    sendJump("/lesson/insert","/lesson",data);
                    event.dialog.remove();
                }
            }, {}]
        });
    }


</script>


</body>
</html>